<template>
  <div class="health">
    <!-- 导航栏开始 -->
    <van-nav-bar
      title="个人健康管理"
      left-text="返回"
      left-arrow 
      @click-left="retu"
    >
    </van-nav-bar>
    <!-- 导航栏结束 -->
    <!-- 性别选择开始 -->
    <van-tabs v-model="active" @click="onClick">
      <van-tab title="女性">
        <div class="photo"><img src="../assets/01nv.png" alt="" /></div>
        <p class="avoid">状态 <span class="two">*最多两项</span></p>
        <van-checkbox-group v-model="result" direction="horizontal">
          <van-checkbox shape="square" name="a1" icon-size="large">
            减脂</van-checkbox
          >
          <van-checkbox shape="square" name="a2">营养均衡</van-checkbox>
          <van-checkbox shape="square" name="a3">增肌</van-checkbox>
          <van-checkbox shape="square" name="a4">养颜</van-checkbox>
          <van-checkbox shape="square" name="a5">备孕</van-checkbox>
          <van-checkbox shape="square" name="a6">孕期</van-checkbox>
        </van-checkbox-group>
        <p class="avoid">
          养育子女<span class="two">*用于婴儿，儿童饮食推荐</span>
        </p>
        <van-stepper theme="round" v-model="sum" />
        <p class="avoid">忌口</p>
        <van-checkbox-group v-model="result" direction="horizontal">
          <van-checkbox shape="square" name="b1" icon-size="large"
            >无</van-checkbox
          >
          <van-checkbox shape="square" name="b2">海鲜</van-checkbox>
          <van-checkbox shape="square" name="b3">辛辣</van-checkbox>
          <van-checkbox shape="square" name="b4">内脏</van-checkbox>
          <van-checkbox shape="square" name="b6">肉类</van-checkbox>
          <van-checkbox shape="square" name="b7">酸涩</van-checkbox>
          <van-checkbox shape="square" name="b8">蛋类</van-checkbox>
          <van-checkbox shape="square" name="b9">酒类</van-checkbox>
          <van-checkbox shape="square" name="b10">生冷类</van-checkbox>
          <van-checkbox shape="square" name="b11">油腻</van-checkbox>
          <van-checkbox shape="square" name="b12">腥膻</van-checkbox>
          <van-checkbox shape="square" name="b13">香菜</van-checkbox>
          <van-checkbox shape="square" name="b14">甜食</van-checkbox>
          <van-checkbox shape="square" name="b15">味精</van-checkbox>
          <van-checkbox shape="square" name="b16">烧烤</van-checkbox>
          <van-checkbox shape="square" name="b17">泡菜</van-checkbox>
        </van-checkbox-group>
        <van-cell-group>
          <van-field v-model="value" label="其他：" placeholder="忌口情况" />
        </van-cell-group>
        <p class="avoid">慢性病</p>
        <van-checkbox-group v-model="result" direction="horizontal">
          <van-checkbox shape="square" name="c1" icon-size="large"
            >无</van-checkbox
          >
          <van-checkbox shape="square" name="c2">高血压</van-checkbox>
          <van-checkbox shape="square" name="c3">低血糖</van-checkbox>
          <van-checkbox shape="square" name="c4">贫血</van-checkbox>
          <van-checkbox shape="square" name="c5">冠心病</van-checkbox>
          <van-checkbox shape="square" name="c6">哮喘</van-checkbox>
          <van-checkbox shape="square" name="c7">内分泌失调</van-checkbox>
          <van-checkbox shape="square" name="c8">月经不调</van-checkbox>
          <van-checkbox shape="square" name="c9">甲亢</van-checkbox>
          <van-checkbox shape="square" name="c10">妇科病</van-checkbox>
          <van-checkbox shape="square" name="c11">甲减</van-checkbox>
          <van-checkbox shape="square" name="c12">糖尿病</van-checkbox>
          <van-checkbox shape="square" name="c13">骨质疏松</van-checkbox>
          <van-checkbox shape="square" name="c14">风湿病</van-checkbox>
          <van-checkbox shape="square" name="c15">慢性腹泻</van-checkbox>
          <van-checkbox shape="square" name="c16">过敏症</van-checkbox>
          <van-checkbox shape="square" name="c17">过偏头痛</van-checkbox>
          <van-checkbox shape="square" name="c17">过偏头痛</van-checkbox>
          <van-checkbox shape="square" name="c18">肝硬化</van-checkbox>
          <van-checkbox shape="square" name="c19">肌无力</van-checkbox>
          <van-checkbox shape="square" name="c20">肾炎</van-checkbox>
          <van-checkbox shape="square" name="c21">肾炎</van-checkbox>
          <van-checkbox shape="square" name="c22">肺气肿</van-checkbox>
          <van-checkbox shape="square" name="c23">肺心病</van-checkbox>
          <van-checkbox shape="square" name="c24">脂肪肝</van-checkbox>
          <van-checkbox shape="square" name="c25">高血脂</van-checkbox>
          <van-checkbox shape="square" name="c26">膀胱炎</van-checkbox>
          <van-checkbox shape="square" name="c27">痛风</van-checkbox>
          <van-checkbox shape="square" name="c28">胃溃疡</van-checkbox>
          <van-checkbox shape="square" name="c29">心肌埂塞</van-checkbox>
          <van-checkbox shape="square" name="c30">胆结石</van-checkbox>
          <van-checkbox shape="square" name="c31">癌症</van-checkbox>
          <van-checkbox shape="square" name="c32">帕金森</van-checkbox>
          <van-checkbox shape="square" name="c33">红斑狼疮</van-checkbox>
          <van-checkbox shape="square" name="c34">帕金森</van-checkbox>
        </van-checkbox-group>
        <van-cell-group>
          <van-field v-model="value" label="其他：" placeholder="慢性病情况" />
        </van-cell-group>
      </van-tab>
   <!-- <van-button id="btn" size="large" type="primary">下一步</van-button> -->
      <van-tab title="男性">
        <div class="photo"><img src="../assets/02_nan.png" alt="" /></div>
        <p class="avoid">状态 <span class="two">*最多两项</span></p>
        <van-checkbox-group v-model="result" direction="horizontal">
          <van-checkbox shape="square" name="d1" icon-size="large">
            减脂</van-checkbox
          >
          <van-checkbox shape="square" name="d2">营养均衡</van-checkbox>
          <van-checkbox shape="square" name="d3">增肌</van-checkbox>
        </van-checkbox-group>
        <van-stepper theme="round" v-model="sum" />
        <p class="avoid">忌口</p>
        <van-checkbox-group v-model="result" direction="horizontal">
          <van-checkbox shape="square" name="e1" icon-size="large"
            >无</van-checkbox
          >
          <van-checkbox shape="square" name="e2">海鲜</van-checkbox>
          <van-checkbox shape="square" name="e3">辛辣</van-checkbox>
          <van-checkbox shape="square" name="e4">内脏</van-checkbox>
          <van-checkbox shape="square" name="e6">肉类</van-checkbox>
          <van-checkbox shape="square" name="e7">酸涩</van-checkbox>
          <van-checkbox shape="square" name="e8">蛋类</van-checkbox>
          <van-checkbox shape="square" name="e9">酒类</van-checkbox>
          <van-checkbox shape="square" name="e10">生冷类</van-checkbox>
          <van-checkbox shape="square" name="e11">油腻</van-checkbox>
          <van-checkbox shape="square" name="e12">腥膻</van-checkbox>
          <van-checkbox shape="square" name="e13">香菜</van-checkbox>
          <van-checkbox shape="square" name="e14">甜食</van-checkbox>
          <van-checkbox shape="square" name="e15">味精</van-checkbox>
          <van-checkbox shape="square" name="e16">烧烤</van-checkbox>
          <van-checkbox shape="square" name="e17">泡菜</van-checkbox>
        </van-checkbox-group>
        <van-cell-group>
          <van-field v-model="value" label="其他：" placeholder="忌口情况" />
        </van-cell-group>
        <p class="avoid">慢性病</p>
        <van-checkbox-group v-model="result" direction="horizontal">
          <van-checkbox shape="square" name="f1" icon-size="large"
            >无</van-checkbox
          >
          <van-checkbox shape="square" name="f2">高血压</van-checkbox>
          <van-checkbox shape="square" name="f3">低血糖</van-checkbox>
          <van-checkbox shape="square" name="f4">贫血</van-checkbox>
          <van-checkbox shape="square" name="f5">冠心病</van-checkbox>
          <van-checkbox shape="square" name="f6">哮喘</van-checkbox>
          <van-checkbox shape="square" name="f7">内分泌失调</van-checkbox>
          <van-checkbox shape="square" name="f8">甲亢</van-checkbox>
          <van-checkbox shape="square" name="f9">甲减</van-checkbox>
          <van-checkbox shape="square" name="f10">糖尿病</van-checkbox>
          <van-checkbox shape="square" name="f11">骨质疏松</van-checkbox>
          <van-checkbox shape="square" name="f12">风湿病</van-checkbox>
          <van-checkbox shape="square" name="f13">慢性腹泻</van-checkbox>
          <van-checkbox shape="square" name="f14">过敏症</van-checkbox>
          <van-checkbox shape="square" name="f15">过偏头痛</van-checkbox>
          <van-checkbox shape="square" name="f16">过偏头痛</van-checkbox>
          <van-checkbox shape="square" name="f17">肝硬化</van-checkbox>
          <van-checkbox shape="square" name="f18">肌无力</van-checkbox>
          <van-checkbox shape="square" name="f19">肾炎</van-checkbox>
          <van-checkbox shape="square" name="f20">肾炎</van-checkbox>
          <van-checkbox shape="square" name="f21">肺气肿</van-checkbox>
          <van-checkbox shape="square" name="f22">肺心病</van-checkbox>
          <van-checkbox shape="square" name="f23">脂肪肝</van-checkbox>
          <van-checkbox shape="square" name="f24">高血脂</van-checkbox>
          <van-checkbox shape="square" name="f25">膀胱炎</van-checkbox>
          <van-checkbox shape="square" name="f26">痛风</van-checkbox>
          <van-checkbox shape="square" name="f27">胃溃疡</van-checkbox>
          <van-checkbox shape="square" name="f28">心肌埂塞</van-checkbox>
          <van-checkbox shape="square" name="f29">胆结石</van-checkbox>
          <van-checkbox shape="square" name="f30">癌症</van-checkbox>
          <van-checkbox shape="square" name="f31">帕金森</van-checkbox>
          <van-checkbox shape="square" name="f32">红斑狼疮</van-checkbox>
          <van-checkbox shape="square" name="f33">帕金森</van-checkbox>
        </van-checkbox-group>
        <van-cell-group>
          <van-field v-model="value" label="其他：" placeholder="慢性病情况" />
        </van-cell-group>
      </van-tab>
    <van-button id="btn" size="large" type="primary" to="/next">下一步</van-button>
    </van-tabs>
   <!-- <van-button size="large" type="primary" to="/viws/Next">下一步</van-button> -->
    <!-- 性别选择结束 -->
    <div style="height: 30rem"></div>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      active: 2,
      sum: 1,
      checked: true,
      result: [],
      value: "",
    };
  },
  methods: {
    retu() {
      this.$router.go(-1);
    },
    onClick(name, title) {
      Toast(title);
    },
  },
  computeds: {},
};
</script>
<style scoped>
.health {
  position: relative;
  padding: 10px;
}
.sex {
  /* position: absolute; */
  text-align: left;
}
.avoid {
  /* position:absolute; */
  text-align: left;
  font-size: 16px;
  color: black;
  padding-top: 10px;
  padding-bottom: 10px;
}
.two {
  color: #333;
  font-size: 10px;
}
.labe {
  padding: 1px;
}
.van-tag {
  margin: 8px 8px;
}
.van-stepper {
  text-align: left;
}
.photo img {
  width: 100px;
  height: 100px;
  display: block;
  left: 50px;
}
</style>